import React, { Component } from 'react';
import { View, Text, Image, TouchableOpacity, Modal, TextInput, ScrollView } from 'react-native';
import THNav from "../../../../../components/THNav";
import IconFont from "../../../../../components/IconFont";
import { BASE_URI, QZ_DT_PL, QZ_DT_PL_DZ, QZ_DT_PL_TJ } from "../../../../../utils/pathMap";
import { pxToDp } from "../../../../../utils/stylesKits";
import date from "../../../../../utils/date";
import THButton from "../../../../../components/THButton";
import request from "../../../../../utils/request";
import Toast from '../../../../../utils/Toast';

class Index extends Component {
    params = {
        page: 1,
        pagesize: 7
    }
    totalPages = 2;
    isLoading = false;
    state = {
        list: [],
        counts: 0,
        showInput: true,
        text: ''
    }

    componentDidMount() {
        this.getList()
    }

    // 获取评论列表
    getList = async (isNew = false) => {
        const url = QZ_DT_PL.replace(':id', this.props.route.params.tid)
        const res = await request.privateGet(url, this.params)
        // console.log(res);
        this.totalPages = res.pages;
        this.isLoading = false;
        if (isNew) {
            this.setState({ list: res.data, counts: res.counts });
        } else {
            this.setState({ list: [...this.state.list, ...res.data], counts: res.counts });
        }
    }

    // 给评论点赞
    handleSetStar = async (id) => {
        const url = QZ_DT_PL_DZ.replace(':id', id)
        const res = await request.privateGet(url)
        console.log(res);
        Toast.smile('点赞成功')
        this.params.page = 1
        this.getList(true)
    }

    // 结束输入
    handleEditingEnd = () => {
        this.setState({ showInput: false, text: '' });
    }

    // 完成编辑 发送评论
    handleSubmit = async () => {
        // 1.获取到评论内容 非空判断
        // 2.开始构造参数 发送请求 完成评论
        // 3.把输入框隐藏起来
        // 4.重新发送请求 获取评论列表数据
        const { text } = this.state;
        if (!text.trim()) {
            Toast.smile('评论不能为空');
            return;
        }
        const url = QZ_DT_PL_TJ.replace(':id', this.props.route.params.tid);
        const res = await request.privatePost(url, { comment: text });
        this.handleEditingEnd();
        this.params.page = 1;
        this.getList(true);
        Toast.smile('评论成功');
    }

    // 滚动分页
    onScroll = ({ nativeEvent }) => {
        // 滚动条触底
        const isReachBottom = nativeEvent.contentSize.height - nativeEvent.layoutMeasurement.height - nativeEvent.contentOffset.y < 10;
        // 还有没有下一页数据
        const hasMore = this.params.page < this.totalPages;
        if (isReachBottom && hasMore && !this.isLoading) {
            this.isLoading = true;
            this.params.page++;
            this.getList();
        }
    }

    render() {
        // console.log(this.props.route.params);
        const item = this.props.route.params;
        const { list, counts, showInput, text } = this.state;
        return (
            <ScrollView
                onScroll={this.onScroll}
                style={{ flex: 1, backgroundColor: '#fff' }}>
                <THNav title="最新评论" />
                {/* 用户信息 */}
                <View style={{ padding: pxToDp(10) }}>
                    {/* 用户信息 */}
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <View
                            style={{ paddingRight: pxToDp(10) }}
                        >
                            <Image
                                style={{ width: pxToDp(40), height: pxToDp(40), borderRadius: pxToDp(20) }}
                                source={{ uri: BASE_URI + item.header }} />
                        </View>
                        <View style={{ flex: 2, justifyContent: 'space-around', paddingLeft: pxToDp(10) }}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Text style={{ color: '#555' }}>{item.nick_name}</Text>
                                <IconFont
                                    style={{ fontSize: pxToDp(18), color: item.gender === '男' ? '#b564bf' : 'red', marginLeft: pxToDp(7), marginRight: pxToDp(7) }}
                                    name={item.gender === '女' ? 'icontanhuanv' : 'icontanhuanan'} />
                                <Text style={{ color: '#555' }}>{item.age}岁</Text>
                            </View>
                            <View style={{ flexDirection: 'row' }}>
                                <Text style={{ color: '#555' }}>{item.marry}</Text>
                                <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                                <Text style={{ color: '#555' }}>{item.xueli}</Text>
                                <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                                <Text style={{ color: '#555' }}>{item.agediff < 10 ? "年龄相仿" : "有点代沟"}</Text>
                            </View>
                        </View>
                    </View>

                    {/* 动态内容 */}
                    <View style={{ marginTop: pxToDp(8) }}>
                        <Text style={{ color: '#666' }}>{item.content}</Text>
                    </View>

                    {/* 相册 */}
                    <View style={{ flexDirection: 'row', flexWrap: 'wrap', paddingTop: pxToDp(5), paddingBottom: pxToDp(5) }}>
                        {
                            item.images.map((vv, ii) => <TouchableOpacity key={ii} ><Image
                                style={{ width: pxToDp(70), height: pxToDp(70), marginRight: pxToDp(5) }}
                                source={{ uri: BASE_URI + vv.thum_img_path }} />
                            </TouchableOpacity>)
                        }
                    </View>

                    {/* 距离和时间 */}
                    <View>
                        <View style={{ flexDirection: 'row', paddingTop: pxToDp(5), paddingBottom: pxToDp(5) }}>
                            <Text style={{ color: '#666' }}>距离 {item.dist} km</Text>
                            <Text style={{ color: '#666', marginLeft: pxToDp(8) }}>{date(item.create_time).fromNow()}</Text>
                        </View>
                    </View>

                    {/* 最新评论 发表评论 */}
                    <View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
                        <View style={{ flexDirection: 'row' }}>
                            <Text style={{ color: '#666' }}>最新评论</Text>
                            <View style={{ backgroundColor: 'red', width: pxToDp(20), height: pxToDp(20), borderRadius: pxToDp(10), marginLeft: pxToDp(5), alignItems: 'center', justifyContent: 'center' }}>
                                <Text style={{ color: '#fff' }}>{counts}</Text>
                            </View>
                        </View>
                        <View>
                            <THButton
                                onPress={() => this.setState({ showInput: true })}
                                textStyle={{ fontSize: pxToDp(10) }}
                                style={{ width: pxToDp(80), height: pxToDp(20), borderRadius: pxToDp(10) }}
                            >
                                发表评论
                            </THButton>
                        </View>
                    </View>

                    {/* 评论列表 */}
                    <View>
                        {
                            list.map((v, i) => <View
                                key={i}
                                style={{ flexDirection: 'row', paddingTop: pxToDp(5), paddingBottom: pxToDp(5), borderBottomColor: '#ccc', borderBottomWidth: pxToDp(1), alignItems: 'center' }}
                            >
                                <View style={{ paddingRight: pxToDp(10) }}>
                                    <Image
                                        style={{ width: pxToDp(40), height: pxToDp(40), borderRadius: pxToDp(20) }}
                                        source={{ uri: BASE_URI + v.header }} />
                                </View>
                                <View>
                                    <Text style={{ color: '#666' }}>{v.nick_name}</Text>
                                    <Text style={{ color: '#666', fontSize: pxToDp(12), marginTop: pxToDp(5), marginBottom: pxToDp(5) }}>{date(v.create_time).format('YYYY-MM-DD HH:mm:ss')}</Text>
                                    <Text>{v.content}</Text>
                                </View>
                                <TouchableOpacity
                                    onPress={this.handleSetStar.bind(this, v.cid)}
                                    style={{ flexDirection: 'row', flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
                                    <IconFont style={{ color: '#666', fontSize: pxToDp(12) }} name="icondianzan-o" />
                                    <Text style={{ color: '#666' }}>{v.star}</Text>
                                </TouchableOpacity>
                            </View>)
                        }
                    </View>

                    <Modal
                        visible={showInput}
                        transparent={true}
                        animationType="slide"
                        onRequestClose={this.handleEditingEnd}
                    >
                        <TouchableOpacity
                            onPress={this.handleEditingEnd}
                            style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', position: 'relative' }}
                        >
                            <View style={{ position: 'absolute', width: '100%', left: 0, bottom: 0, backgroundColor: '#eee', flexDirection: 'row', padding: pxToDp(5), alignItems: 'center' }}>
                                <TextInput
                                    autoFocus
                                    value={text}
                                    onChangeText={t => this.setState({ text: t })}
                                    onSubmitEditing={this.handleSubmit}
                                    placeholder="发表您的看法~"
                                    style={{ backgroundColor: '#fff', flex: 5, borderRadius: pxToDp(18), height: pxToDp(36) }} />
                                <Text
                                    onPress={this.handleSubmit}
                                    style={{ flex: 1, textAlign: 'center', color: '#666' }}>发布</Text>
                            </View>
                        </TouchableOpacity>
                    </Modal>
                </View>

                {
                    this.params.page >= this.totalPages ? <View style={{ height: pxToDp(40), alignItems: 'center', justifyContent: 'center', backgroundColor: '#eee' }}>
                        <Text>没有更多数据了~</Text>
                    </View> : <></>
                }
            </ScrollView>
        );
    }
}

export default Index;